<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/ycdb.png" alt="">
      </div>
      <h2>异常对比<span v-if="$store.state.building">东湖花园小区{{ $store.state.listData.infoS[0].buildNo < 10 ?
          (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) :
          $store.state.listData.infoS[0].buildNo
      }}栋</span>
      </h2>
    </div>
    <div class="monitor_echarts">
      <div id="monitor_main"></div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      myChart: {},
      arr: [],
      tenantid: 1129,
      community: 1,
      buildNo: '',
      keysObj: []
    }
  },
  created() {
    // this.getData()
  },
  mounted() {
    setTimeout(() => {
      this.getData()
    }, 2000)
  },
  methods: {
    changeBuildNo(id) {
      this.buildNo = id
      this.getData()
    },
    async getData() {
      const res = await api.anomaly({ tenantid: this.tenantid, community: this.community, buildNo: this.buildNo })
      // console.log(res)
      this.arr = res.data
      this.keysObj = Object.keys(this.arr)
      let oldArr = [], newArr = []
      if (this.$store.state.building) {
        this.keysObj.forEach(item => {
          oldArr.push(item.match(/\d+/g).join(''))
        })
        oldArr.sort((a, b) => a - b)
        oldArr.forEach(item => {
          this.keysObj.forEach(item2 => {
            if (item2.match(/\d+/g).join('') == item) newArr.push(item2)
          })
        })
        this.initChart(newArr, this.arr)
      } else {
        this.initChart(this.keysObj, this.arr)
      }
    },
    // 图表初始化
    initChart(keysObj, obj) {
      // 水量异常 TDS异常 水压异常
      const arr1 = [], arr2 = [], arr3 = []
      keysObj.forEach(item => {
        arr1.push(0)
        arr2.push(0)
        arr3.push(0)
        obj[item].forEach(item => {
          item.alarmTypeNo == '流量异常' ? arr1[arr1.length - 1] = item.alarmCount : ''
          item.alarmTypeNo == 'TDS异常' ? arr2[arr2.length - 1] = item.alarmCount : ''
          item.alarmTypeNo == '压力异常' ? arr3[arr3.length - 1] = item.alarmCount : ''
        })
      })


      this.myChart = this.$echarts.init(document.getElementById('monitor_main'))
      const colors = ['#41dcff', '#32dea9', '#f1c541', '#fd7760']
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'background: #023881;border:none;color:#fff;opacity: 0.9;',
          formatter(params) {
            let res = []
            params.forEach((v)=>{
              res.push(`<span style="font-size: 0.12rem;">${v.seriesName}：<span style="color: #058cff">${v.value}</span></span>`)
            })
            return res.join('<br />')
          }
        },
        grid: {
          right: '10%',
          top: '23%',
          bottom: '25%',
          left: '15%',
          // x: "12%",//x 偏移量
          // y: "7%", // y 偏移量
          // width: '100%', // 宽度
          // height: '100%'
        },
        legend: {
          data: ['水量异常', 'TDS异常', '水压异常'],
          top: '0%',
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            color: '#fff',
            fontSize: '10px'
          }
        },
        dataZoom: [
          {
            type: 'slider',
            // show: true,
            height: 15,
            bottom: 15,
            // fillerColor: '#409EFF',
            // borderColor: 'transparent',
            // backgroundColor: '#7e94bb',
            // // 拖拽手柄样式 svg 路径
            // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            // handleColor: '#50d5fd',
            // handleSize: 10,
            start: 20,
            end: 80,
            textStyle: {
              color: '#50fde7'
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            show: true,
            data: keysObj ? keysObj : [1,2,3,4,5,6],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#38e8fb'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#38e8fb'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            alignTicks: true,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#5fa1ff',
                opacity: 0.3
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#38e8fb'
              }
            },
            axisLabel: {
              show: true,
              min: 1,
              textStyle: {
                color: '#38e8fb'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          }
        ],
        series: [
          // {
          //   name: '水质异常',
          //   type: 'bar',
          //   data: [100, 200, 300, 400]
          // },
          {
            name: '水量异常',
            type: 'bar',
            data: arr1
          },
          {
            name: 'TDS异常',
            type: 'bar',
            data: arr2
          },
          {
            name: '水压异常',
            type: 'bar',
            data: arr3
          },
        ]
      })
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor_echarts {
  padding-top: 0.6rem;

  #monitor_main {
    width: 100%;
    height: 2.2rem;
  }
}
</style>
